<template>
  <div>


	<myheader></myheader>

	<br /><br />
	<!-- 面包屑导航 -->
	<Breadcrumb :datas='datas'></Breadcrumb>


	<section class="featured-block text-center">
		<div class="container">
			<Avatar :src='src' :width='100' fit='fill'></Avatar>
			<input type="file" @change="upload">


			<br />
			七牛云上传:
			<input type="file" @change="upload_qiniu">
			<br />
			{{ imageload }}


			<!-- HeyUI进度条 -->
	<p><Progress v-show="imageload" :percent="imageload" color="green"><span slot="title"></span><span slot="text">{{ imageload }}%</span></Progress></p>
		</div>
		<video id='video' weight="300" height="220" controls="controls" autoplay='autoplay' v-if="mp4" muted>
			<source :src="mp4" type="video/mp4" />
			Your browser does not support the video tag.
		</video>

		<br><br>

			<Button @click="changepic">{{mybutton}}</Button>


		<br><br>



		<a :href="url" v-if="url">七牛云文件链接</a>
		<button color='blue' @click='submit'>提交修改</button>
		<hr>
		<input type="text" v-model="password">
		<button color='blue' @click='submit1'>修改密码</button>
		<hr>

		<a href="/goodscreate" v-if="admin">添加商品</a>


	</section>
	<myfooter></myfooter>

	
	

    
  </div>
  
</template>


 
<script>

// 组件包含
import header from './header.vue';
import footer from './footer.vue';

// 导入滑块验证码
import dragVerify from 'vue-drag-verify'



export default {
  data () {
    return {
	  // 面包屑导航数据
	  	datas: [
			{title: '首页', route:{name: 'index'}},
			{title: '登录页面', route:{name: 'register'}},
		],
		src:'',
		// 令牌
		uptoken:'',
		mp4:'',
		url:'',
		imageload: '',
		// 原始图片路径
		mysrc: '',

		password: '',
		// 是否管理员
		admin:false,
		// 切换按钮变量
		mybutton: '进入画中画'
    }
  },
  mounted:function(){
	  
			this.get_token();
			this.get_user_img();

  },
  methods:{

	  	// 文件上传到django服务器
		upload(e){
			let file = e.target.files[0];
			let parme = new FormData;
			let config = {
				'Content-Type': 'multipart/form-data'
			}
			parme.append('file',file)
			this.axios.post('http://127.0.0.1:8000/uploadfile/',parme,config).then((result)=>{
				console.log(result.data);
				if(result.data.filetype == 'mp4'){
					this.mp4 = 'http://localhost:8000/static/upload/'+result.data.filename + '.' + result.data.filetype;
				}
				this.src = 'http://localhost:8000/static/upload/'+result.data.filename + '.' + result.data.filetype;
				// console.log(this.src)
				this.mysrc = result.data.filename + '.' + result.data.filetype;
				console.log(this.mysrc)
			})
		},
		// 令牌获取函数
		get_token(){
			this.axios.get('http://127.0.0.1:8000/uptoken/').then((result)=>{
				console.log(result.data)
				this.uptoken = result.data.uptoken;

			})
		},
		
		//上传七牛云
		upload_qiniu:function(e){

			//声明文件对象
			let file = e.target.files[0];
			//声明参数类型
			let param = new FormData();
			//添加文件
			param.append('file',file);
			param.append('token',this.uptoken);
			console.log(this.uptoken)
			console.log(file)
			console.log(param)
			//定制axios请求
			const axios_qiniu = this.axios.create({withCredentials:false});
			axios_qiniu({

				method:'POST',
				url:'http://up-z1.qiniu.com/',
				data:param,
				timeout:30000,
				//上传进度捕捉,
				onUploadProgress:(e)=>{
					// 计算上传进度
					// loaded 已经上传的数据
					// total  全部的数据总量
					let complate = (e.loaded / e.total);

					if(complate < 1){
						this.imageload = (complate * 100).toFixed(2) + '%'
					}
				}

			}).then(result =>{

				console.log(result.data);
				this.url = 'http://q68ml0e0k.bkt.clouddn.com/' + result.data.key;
				this.imageload = '100%'
			});
		},
		// 提交用户修改
		submit(){
			this.axios.get('http://127.0.0.1:8000/updateuser/',{params:{
				uid: localStorage.getItem('uid'),
				img: this.mysrc
			}}).then((result)=>{
				console.log(result.data);
				this.$Message(result.data.message);
			})
		},
		get_user_img(){
			this.axios.get('http://127.0.0.1:8000/userimg/',{params:{
				uid: localStorage.getItem('uid')
			}}).then((result)=>{
				console.log(result.data);
				
				let img = result.data.img;
				this.src = 'http://localhost:8000/static/upload/' + img;
				let type = result.data.type;
				// if(type == 2){
				// 	localStorage.setItem('admin') = true;
				// }else{
				// 	localStorage.setItem('admin') = false;
				// }
				// this.admin = localStorage.getItem('admin');
			})
		},
		// 提交用户修改密码
		submit1(){
			this.axios.get('http://127.0.0.1:8000/password/',{params:{
				uid: localStorage.getItem('uid'),
				password: this.password
			}}).then((result)=>{
				console.log(result.data);
				this.$Message(result.data.message);
			})
		},
		// 画中画切换
		changepic(){
			if(video !== document.pictureInPictureElement){
				video.requestPictureInPicture();
				this.mybutton = '退出画中画';
			}else{
				document.exitPictureInPicture();
				this.mybutton = '进入画中画';
			}

		}
  },
  // 生命组件
  components:{
	  'myheader':header,
	  'myfooter':footer,
	  'dragVerify':dragVerify
  }
}


</script>
 
<style>



</style>